<template>
  <div class="interface-config">
    <tabs
      :tabPane="tabPaneList"
      v-model="activeName"
      @actionClick='actionClick'>
    </tabs>
    <keep-alive>
      <component :is="activeName" :ref='activeName'></component>
    </keep-alive>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import tabs from '@/components/configCommon/configTabs.vue'
import { isHasFuncOrMenus } from '@/utils/common'
@Component({
  name: 'interface',
  components: {
    tabs,
    interfaceConfig: () => import('@/views/config/interface/interfaceConfig/index.vue'),
    eventPush: () => import('@/views/config/interface/eventPush/index.vue'),
    funcDocking: () => import('@/views/config/interface/funcDocking/index.vue')
  }
})
export default class Interface extends Vue {
  [x: string]: any
  private activeName = 'interfaceConfig'
  private tabPaneList = [
    {
      label: '对接设置',
      name: 'interfaceConfig',
      _id: 'child_docking_setting'
    },
    {
      label: '事件推送',
      name: 'eventPush',
      _id: 'docking_setting_event_send'
    },
    {
      label: '功能页对接',
      name: 'funcDocking',
      _id: 'docking_setting_function_page'
    }
  ]

  private actionClick (action, data) {
    this.$refs[this.activeName][action](data)
  }

  private beforeMount () {
    const arr = ['child_docking_setting', 'docking_setting_event_send', 'docking_setting_function_page'] // 对接设置， 事件推送
    const newArr: any[] = []
    arr.forEach((item: string) => {
      if (isHasFuncOrMenus(item, this.$store.state.common.session.user, true)) {
        newArr.push(item)
      }
    })
    this.tabPaneList = this.tabPaneList.filter(item => newArr.indexOf(item._id) > -1)
    this.activeName = this.tabPaneList[0] ? this.tabPaneList[0].name : 'interfaceConfig'
  }
}
</script>

<style lang="stylus" scoped>
.interface-config
  height 100%
  position relative
</style>
